/** 
 持仓信息
*/
import React, { PureComponent } from 'react';
import { TableC, NoDataMaskC, InputC, IconC } from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Tooltip } from 'antd';
import config from './config';
import { connect } from 'dva';
import _ from 'lodash';
import debounce from 'lodash/debounce';
@Form.create()
class HoldInfoC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      portfolioId: undefined, //组合id
      dataSource: [], //表格数据
      columns: config.columns, //表头
    };
    // 搜索框加防抖
    this.searchOnChange = debounce(this.searchOnChange, 500);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.portfolioId !== this.state.portfolioId) {
      this.setState(
        {
          portfolioId: nextProps.portfolioId,
        },
        () => {
          if (nextProps.portfolioId) this.queryData(); //查询持仓列表
        },
      );
    }
  }

  //查询持仓数据
  queryData = () => {
    const { portfolioId } = this.state;
    this.setState({
      dataSource: undefined, //表格数据
      columns: undefined, //表头
    });
    this.props.dispatch({
      type: 'exchangePledgeM/queryHold',
      payload: {
        page: { current: 1, pageSize: 1000 },
        portfolioId: portfolioId,
      },
      callback: (data) => {
        if (data) {
          //成功
          data.map((item, key) => {
            item.key = key;
          });
          this.listDatasource = _.cloneDeep(data);
          this.setState({
            dataSource: [...data],
            columns: config.columns, //表头
          });
          this.props.getData(data);
        } else {
          //失败
          this.props.getData(undefined);
          this.listDatasource = [];
          this.setState({
            dataSource: [],
            columns: config.columns, //表头
          });
        }
      },
    });
    this.resetSearch();
  };

  // 持仓信息搜索框右侧按钮
  rightContent = () => {
    return (
      <div className='flotRight'>
        <div>
          <Tooltip placement='top' title={'查询'}>
            <div className='btnPlus' onClick={this.searchPosition} style={{ cursor: 'pointer' }}>
              <IconC type={'search'} />
            </div>
          </Tooltip>
        </div>
      </div>
    );
  };

  // 响应搜索
  searchPosition = () => {
    const {
      form: { getFieldValue },
    } = this.props;
    let searchData = getFieldValue('search');
    let newListDataSource = [];
    if (searchData == '' || searchData == null) {
      newListDataSource = this.listDatasource;
    } else {
      newListDataSource = this.listDatasource.filter((item) => {
        return item.tradingcode.toString().includes(searchData) || item.secuabbr.toString().includes(searchData);
      });
    }
    this.setState({ dataSource: newListDataSource });
  };
  // 响应搜索框变化
  searchOnChange = (e) => {
    this.searchPosition(e);
  };
  // 清空持仓信息搜索框
  resetSearch = () => {
    const {
      form: { setFieldsValue },
    } = this.props;
    setFieldsValue({ search: null });
  };
  render() {
    const { dataSource, columns } = this.state;
    const { portfolioId } = this.props;
    const newDataSource =
      portfolioId === undefined
        ? [
            {
              tradingcode: '000001',
              secuabbr: '华泰证券股份有限公司',
              pledgeAmount: '100000000',
              exchangeCode: '101',
              lRatio: '20',
              tradingAmount: '100000000',
              availableAmount: '100000000',
              tradingAmountOk: '10000000',
            },
          ]
        : dataSource;
    return (
      <div>
        {portfolioId != undefined && (
          <div style={{ position: 'absolute', top: '-10px', right: 0, width: '220px' }}>
            <InputC
              form={this.props.form}
              dataIndex='search'
              placeholder='请输入代码或简称进行搜索'
              suffix={this.rightContent()}
              onChange={(e) => this.searchOnChange(e.target?.value)}
            />
          </div>
        )}
        <div style={{ position: 'relative', height: portfolioId == undefined ? '100px' : '100%' }}>
          <TableC columns={columns} dataSource={newDataSource} hidePage={true} scroll={{ y: 160 }} rowKey={'key'} />
          {portfolioId === undefined ? <NoDataMaskC height={'100%'} title='请选择相对应组合，加载数据！' /> : null}
        </div>
      </div>
    );
  }
}
export default connect(({ exchangePledgeM }) => ({ exchangePledgeM }))(HoldInfoC);
